<template>
  <div class="wrapper" style="position: absolute; z-index: 200;top: 14px;width: auto">
    <div class="selectModelType" >
      <div class="tip" style="text-align: center"><p>功能面板 | 底图切换</p></div>
      <el-button type="primary" size="mini" plain @click="changeBaseMap('baidu')">百度</el-button>
      <el-button type="primary" size="mini" plain @click="changeBaseMap('gaode')">高德</el-button>
      <el-button type="primary" size="mini" plain @click="changeBaseMap('tianditu')">天地图</el-button>
      <br /><br />
      <el-button type="primary" size="mini" plain @click="changeBaseMap('arcgis')">ArcGIS</el-button>
      <el-button type="primary" size="mini" plain @click="changeBaseMap('geoserver')">GeoServer</el-button>
      <br /><br />
      <el-button type="primary" size="mini" plain @click="relocation">复位</el-button>
      <el-button type="danger" disabled size="mini" plain @click="change()">change</el-button>
      <br /><br />
      <span style="color: #99a9bf">FPI-ArcGIS 服务器</span>
      <br /><br />
      <el-button type="primary" size="mini" plain @click="changeBaseMap('供应商')">供应商</el-button>
      <el-button type="primary" size="mini" plain @click="changeBaseMap('暗色')">暗色</el-button>
      <el-button type="primary" size="mini" plain @click="changeBaseMap('新配图')">新配图</el-button>
      <br /><br />
      <el-button type="primary" size="mini" plain @click="addBaseMap('叠图层')">叠图层</el-button>

      <br /><br />
      <span style="color: #99a9bf">小功能</span>
      <br /><br />
      <el-button type="primary" size="mini" plain @click="changeBaseMap('tianditu2')">天地图2</el-button>

    </div>
    <div id="toolTip" style="z-index: 1000;display:none;position:absolute;height:20px;width:160px;background:olive;top:0px;left:0px;font-size: 8px">
      <el-button id="toolTipButton" type="danger" size="mini" style="" plain @click="clearDrawingBoard()">清除</el-button>
    </div>
    <!--    <my-viewer :mapProps="mapProps" @viewerisok=""></my-viewer>-->
  </div>
</template>

<script>
  import 'element-ui/lib/theme-chalk/base.css';
  import BaiduImageryProvider_old from "../../script/BaiduImageryProvider"
  import {getRiver} from "../../data/river/bd09-test.js"
  import {getJsMethod} from "../../script/utils/common"
  // import {gisStr,gisNum,funct1,funct2} from "../../script/test"
  export default {
    name: "baseMap",
    data() {
      return {
      }
    },
    components: {
    },
    created() {
    },
    mounted() {
      if (this.$store.state.currentFrameNameStore === 'cesium')  this.init();//cesium时，调用的
    },
    watch:{
    },
    methods: {
      //重定位
      relocation(){
        getJsMethod("relocation").then(e => e());
      },
      //地球旋转
      init(){
        mapBaseF.removeAllNtt();
        viewer.scene.morphTo2D(0.0);//二维
        let promise_bd= viewer.dataSources.add(Cesium.GeoJsonDataSource.load('static/data/bd_xinanjiang.json', {
          stroke: Cesium.Color.HOTPINK,  //多边形轮廓的默认颜色
          fill: Cesium.Color.PINK,    //多边形内部的默认颜色。
          markerColor: Cesium.Color.RED, //获取或设置为每个点创建的地图针脚的默认颜色
          strokeWidth: 5,    //线段或者多边形默认宽度
          markerSymbol: 'name'   //是被标注字段
        }));
        let promise_bdPY= viewer.dataSources.add(Cesium.GeoJsonDataSource.load('static/data/bdPY_qiantangjiang.json', {
          stroke: Cesium.Color.HOTPINK,  //多边形轮廓的默认颜色
          fill: Cesium.Color.PINK,    //多边形内部的默认颜色。
          markerColor: Cesium.Color.RED, //获取或设置为每个点创建的地图针脚的默认颜色
          strokeWidth: 5,    //线段或者多边形默认宽度
          markerSymbol: 'name'   //是被标注字段
        }));
        let promise_bdPY2= viewer.dataSources.add(Cesium.GeoJsonDataSource.load('static/data/bdPY2_xinanjiang.json', {
          stroke: Cesium.Color.HOTPINK,  //多边形轮廓的默认颜色
          fill: Cesium.Color.PINK,    //多边形内部的默认颜色。
          markerColor: Cesium.Color.RED, //获取或设置为每个点创建的地图针脚的默认颜色
          strokeWidth: 5,    //线段或者多边形默认宽度
          markerSymbol: 'name'   //是被标注字段
        }));
        let promise_84= viewer.dataSources.add(Cesium.GeoJsonDataSource.load('static/data/wgs84.json', {
          stroke: Cesium.Color.HOTPINK,  //多边形轮廓的默认颜色
          fill: Cesium.Color.PINK,    //多边形内部的默认颜色。
          markerColor: Cesium.Color.RED, //获取或设置为每个点创建的地图针脚的默认颜色
          strokeWidth: 5,    //线段或者多边形默认宽度
          markerSymbol: 'name'   //标注字段
        }));

        //吉林省
        let jilinsheng1 = viewer.dataSources.add(Cesium.GeoJsonDataSource.load('static/data/伊通河.json', {
          stroke: Cesium.Color.PALETURQUOISE ,  //多边形轮廓的默认颜色
          fill:Cesium.Color (0.5,0.5,0.5,0.5),    //多边形内部的默认颜色。
          markerColor: Cesium.Color.PALETURQUOISE  , //获取或设置为每个点创建的地图针脚的默认颜色
          strokeWidth: 5,    //线段或者多边形默认宽度
          markerSymbol: 'name'   //标注字段
        }));

        let jilinsheng2 = viewer.dataSources.add(Cesium.GeoJsonDataSource.load('static/data/bd_伊通河.json', {
          stroke: Cesium.Color.HOTPINK,  //多边形轮廓的默认颜色bdPY_
          fill:Cesium.Color (0.5,0.5,0.5,0.5),    //多边形内部的默认颜色。
          markerColor: Cesium.Color.RED, //获取或设置为每个点创建的地图针脚的默认颜色
          strokeWidth: 5,    //线段或者多边形默认宽度
          markerSymbol: 'name'   //标注字段
        }));


        let jilinsheng3 = viewer.dataSources.add(Cesium.GeoJsonDataSource.load('static/data/bdPY_伊通河.json', {
          stroke: Cesium.Color.HOTPINK,  //多边形轮廓的默认颜色bdPY_
          fill:Cesium.Color (0.5,0.5,0.5,0.5),    //多边形内部的默认颜色。
          markerColor: Cesium.Color.RED, //获取或设置为每个点创建的地图针脚的默认颜色
          strokeWidth: 5,    //线段或者多边形默认宽度
          markerSymbol: 'name'   //标注字段
        }));

        let HuiFaHe = viewer.dataSources.add(Cesium.GeoJsonDataSource.load('static/data/bd_辉发河.json', {
          stroke: Cesium.Color.HOTPINK,  //多边形轮廓的默认颜色bdPY_
          fill:Cesium.Color (0.5,0.5,0.5,0.5),    //多边形内部的默认颜色。
          markerColor: Cesium.Color.RED, //获取或设置为每个点创建的地图针脚的默认颜色
          strokeWidth: 5,    //线段或者多边形默认宽度
          markerSymbol: 'name'   //标注字段
        }));
        let HuiFaHe2 = viewer.dataSources.add(Cesium.GeoJsonDataSource.load('static/data/bdPY_辉发河.json', {
          stroke: Cesium.Color.HOTPINK,  //多边形轮廓的默认颜色bdPY_
          fill:Cesium.Color (0.5,0.5,0.5,0.5),    //多边形内部的默认颜色。
          markerColor: Cesium.Color.RED, //获取或设置为每个点创建的地图针脚的默认颜色
          strokeWidth: 5,    //线段或者多边形默认宽度
          markerSymbol: 'name'   //标注字段
        }));

        // viewer.zoomTo(jilinsheng1);   //飞入json文件所在位置
        // viewer.camera.setView({
        //   destination: Cesium.Cartesian3.fromRadians(viewer.camera.positionCartographic.longitude, viewer.camera.positionCartographic.latitude, 376923),
        // });
        viewer.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(125.317, 44.056, 4369),
        });

        viewer.camera.setView({
                  destination: Cesium.Cartesian3.fromDegrees(125.319, 43.894, 171986.399),
        });


        //获取鼠标点击处的坐标
        let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas)
        handler.setInputAction( (event) => {
          let earthPosition = viewer.camera.pickEllipsoid(event.position)
          if (Cesium.defined(earthPosition)) {
            let cartographic = Cesium.Cartographic.fromCartesian(earthPosition);
            let longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
            let latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
            console.log("左键点业务图层->");
            console.log("longitudeString:" + longitudeString + "latitudeString:" + latitudeString);
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

        handler.setInputAction((event) => {
          let earthPosition = viewer.camera.pickEllipsoid(event.position)
          if (Cesium.defined(earthPosition)) {
            let cartographic = Cesium.Cartographic.fromCartesian(earthPosition);
            let longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
            let latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
            console.log("右键点百度底图->");
            console.log("longitudeString:" + longitudeString + "latitudeString:" + latitudeString);
          }
        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

      },
      changeBaseMap(type){
        getJsMethod("changeBaseMap").then(e => e(type));
      },
      addBaseMap(type){
        /*
        百度坐标系下，可以加载自发布的动态要素。但不可以加载切片要素
        */
        if (this.$store.state.currentFrameNameStore === 'leaflet'){
          //自发布 切片
          // let layer = L.esri.tiledMapLayer({url:"http://arcgis-server.fpi-inc.site/arcgis/rest/services/jilin/light_c/MapServer"});
          //自发布 切片
          // let layer = L.esri.tiledMapLayer({url:"http://localhost:6080/arcgis/rest/services/jilin_dem_c/MapServer"});
          // let layer = L.esri.tiledMapLayer({url:"http://localhost:6080/arcgis/rest/services/百度山影图/MapServer"});
          //自发布 动态dynamicMapLayer
          // let layer = L.esri.dynamicMapLayer({
          //   url:'http://localhost:6080/arcgis/rest/services/吉林_山影图_d/MapServer',
          //   opacity: 0.8,
          //   f:'json'
          // });
          // leafletMap.addLayer(layer); //layer.addTo(leafletMap);

          new L.TileLayer.WMTS( "http://localhost:8888/geowebcache/service/wmts" ,//本机服务地址
            // currentLayer = new L.TileLayer.WMTS( "http://111.26.1.82:8888/geowebcache/service/wmts" ,//远程服务地址
            {
              layer: "test",//图层名称
              tilematrixSet: "EPSG:3857_test",//GeoServer使用的网格名称
              // tileSize : 256,//切片大小
              format: 'image/png',
            }
          ).addTo(leafletMap);

        }else if(this.$store.state.currentFrameNameStore === 'cesium'){
          /*
          cesium加载arcgis发布的地图，无论是动态绘制还是切片，都可以正常加载
           */
          viewer.scene.imageryLayers.addImageryProvider(
            new Cesium.ArcGisMapServerImageryProvider({
              // url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
              url: 'http://localhost:6080/arcgis/rest/services/中国各省/MapServer',
              // url: 'http://localhost:6080/arcgis/rest/services/中国各省_c/MapServer',
              enablePickFeatures: false
            })
          );

        }
      },
      printLayerInfo(uno){
        console.log("mySlayers长度:" + viewer.imageryLayers.length);
      },
      setElip(){
        viewer.camera.setView({destination:Cesium.Cartesian3.fromDegrees(119.255,29.607,100000)});
        // let obj = [6378137.0, 6378137.0, 6356752.3142451793];
        // Cesium.Ellipsoid.WGS84 = Cesium.freezeObject(new Cesium.Ellipsoid(obj[0], obj[1], obj[2]))
      },
      change(){
        let cgs2000Ellipsolid = new Cesium.Ellipsoid(6378137.0, 6378137.0, 6356752.31414035585)
        let cgs2000GeographicProj = new Cesium.GeographicProjection(cgs2000Ellipsolid)
        // let viewer = new Cesium.Viewer('cesiumContainer', {
        //   mapProjection: cgs2000GeographicProj,
        // })

        viewer.mapProjection = cgs2000GeographicProj;

      }
    },
    destroyed() {
      // mapBaseF.removeAllNtt();
    },

  }
</script>

<style scoped>

</style>
